<template>
  <el-container class="content">
    <el-container>
      <el-aside width="300px">
        <el-menu
            :default-active="activeIndex"
            background-color="#eee"
            class="el-menu-vertical-demo"
            @select="handleSelect"
            >
            <el-menu-item index="user">
              <i class="el-icon-user-solid" ></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="commodity">
              <i class="el-icon-goods" ></i>
              <span slot="title">商品管理</span>
            </el-menu-item>
            <el-menu-item index="classification">
              <i class="el-icon-document" ></i>
              <span slot="title">分类管理</span>
            </el-menu-item>
            <el-menu-item index="notice">
              <i class="el-icon-setting" ></i>
              <span slot="title">公告管理</span>
            </el-menu-item>
            <el-menu-item index="price">
              <i class="el-icon-s-opportunity" ></i>
              <span slot="title">行情管理</span>
            </el-menu-item>
          </el-menu>
      </el-aside>
      <el-main>
        <userTbale v-if="activeIndex=='user'"></userTbale>
        <commodityTbale v-else-if="activeIndex=='commodity'"></commodityTbale>
        <classificationTbale v-else-if="activeIndex=='classification'"></classificationTbale>
        <priceTable v-else-if="activeIndex=='price'"></priceTable>
        <noticeTbale v-else></noticeTbale>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
 import noticeTbale from '../../components/layout/noticeTable.vue'
 import userTbale from '../../components/layout/userTable.vue'
 import commodityTbale from '../../components/layout/commodity.vue'
 import classificationTbale from '../../components/layout/classification.vue'
 import priceTable from '../../components/layout/priceTable.vue'
 export default {
  data () {
    return {
      activeIndex:'user',

    }
  },
  methods: {
    handleSelect(index) {
      this.activeIndex=index;
    }
  },
  components:{
    noticeTbale,
    userTbale,
    commodityTbale,
    classificationTbale,
    priceTable
  }
 }
</script>
<style scoped lang="less">
  .el-aside {
    height: 80vh;
    background: #f1f2f3;
  }
  .el-main {
    background-color: #E9EEF3;
    height: 80vh;
  }
  .el-header{
    background-color: #B3C0D1;
  }
  .el-menu-vertical-demo{
    height: 100%;
  }
</style>